<template>
  <div id="testForm">
    <splitpanes class="default-theme">
      <pane :size="isCollapseMenu ? ( (330+(classList.length*40))/ (contWidth + 190)) * 100 : ((330+(classList.length*40)) / contWidth) * 100">
        <el-form ref="formRef" :rules="testFormRule" :model="testForm" label-width="80px" size="small" class="form-input-m" :inline-message="true" :disabled="testForm.status>1">
          <el-form-item prop="reagentBarcode" label="试剂条码">
            <el-input v-model="testForm.reagentBarcode" type="text" @keyup.enter="handleSearch(formRef)" placeholder="请输入试剂条码">
              <template #append>
                <el-button :icon="Search" class="search-btn" @click="handleSearch(formRef)" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="applicationNo" label="申请号">
            <el-input v-model="testForm.applicationNo" type="text" placeholder="请输入申请号"></el-input>
          </el-form-item>
          <el-form-item prop="sampleNo" label="标本号">
            <el-input v-model="testForm.sampleNo" type="text" placeholder="请输入标本号"></el-input>
          </el-form-item>
          <el-form-item prop="idCard" label="证件号">
            <el-input v-model="testForm.idCard" @blur="findPersonByIdCard" @keyup.enter="findPersonByIdCard" type="text" placeholder="请输入证件号"></el-input>
          </el-form-item>
          <el-form-item prop="name" label="姓名">
            <el-input v-model="testForm.name" type="text" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item prop="cardNo" label="卡号">
            <el-input v-model="testForm.cardNo" type="text" placeholder="请输入卡号"></el-input>
          </el-form-item>
          <el-form-item prop="patientType" label="病人类型">
            <el-select v-model="testForm.patientType" placeholder="请选择病人类型">
              <template v-for="item in perTypeList" :key="item.code">
                <el-option :label="item.name" :value="item.code"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item prop="checkItem" label="检查项目">
            <el-input v-model="testForm.checkItem" type="text" placeholder="请输入检查项目"></el-input>
          </el-form-item>
          <el-form-item prop="wetBarcode" label="湿片条码">
            <el-input v-model="testForm.wetBarcode" type="text" placeholder="请输入湿片条码"></el-input>
          </el-form-item>
          <el-form-item prop="dyeBarcode" label="染片条码">
            <el-input v-model="testForm.dyeBarcode" type="text" placeholder="请输入染片条码"></el-input>
          </el-form-item>
          <el-form-item prop="boardNo" label="板号">
            <el-input v-model="testForm.boardNo" type="text" placeholder="请输入板号"></el-input>
          </el-form-item>
        </el-form>
        <div class="left-btn">
          <el-button type="primary" size="small" @click="submitForm(formRef)" icon="Plus" :loading="sloading" v-if="!testForm.id">新建</el-button>
          <el-button size="small" type="info" icon="BrushFilled" @click="handleNewBuilt(formRef)">重置</el-button>
        </div>
        <el-table ref="testPerTableRef" :data="testPerList" v-loading="ttloading" row-key="id" border stripe :style="{'width':(260+(classList.length*40))+'px'}"
          :height="(contHeight-462)+'px'" size="small" highlight-current-row @row-click="handClickTestTab">
          <el-table-column prop="sampleNo" align="center" label="标本号" width="60" />
          <el-table-column prop="name" align="center" label="姓名" width="60" />
          <el-table-column class-name="cls-status" align="center" width="40" v-for="(col,index) in classList" :key="index" :label="col.short">
            <template #default="scope">
              <div v-for="(item,cIndex) in scope.row.TestResultClasses" :key="cIndex">
                <el-icon v-if="item.classId===col.id && item.status===1" size="18px" style="color:#67C23A">
                  <SuccessFilled />
                </el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column class-name="cls-status" align="center" label="审" width="40">
            <template #default="scope">
              <el-icon v-if="scope.row.status===3" size="18px" style="color:#67C23A">
                <SuccessFilled />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column class-name="cls-status" align="center" label="印" width="40">
            <template #default="scope">
              <el-icon v-if="scope.row.reportStatus===1" size="18px" style="color:#67C23A">
                <SuccessFilled />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="boardNo" align="center" label="板号" width="60" />
        </el-table>
        <!-- 分页显示总条数totalCount，table需要设置 v-loading="ttloading"懒加载属性 -->
        <el-pagination style="margin-left:10px" :small="true" :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
          :page-sizes="pageSizeList" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="totalCount"></el-pagination>
      </pane>
      <pane :size="100 - (isCollapseMenu ? ((330+(classList.length*40)) / (contWidth + 190)) * 100 : ((330+(classList.length*40)) / contWidth) * 100)">
        <el-scrollbar class="cont-scroll">
          <el-row :gutter="5" class="cls-item">
            <el-col :span="12" v-for="clsItem in classItemList" :key="clsItem.name">
              <el-divider content-position="left" class="fix-width">
                {{ clsItem.name }}
                <el-button v-if="testForm.id && clsItem.status!==1" circle class="eval-btn" size="small" :icon="Finished" :disabled="testForm.status>1"
                  @click="handleFinish(clsItem)"></el-button>
              </el-divider>
              <el-table :data="clsItem.itemList" border scrollbar-always-on style="width: calc(100% - 10px)" max-height="235px" size="small" class="input-m">
                <el-table-column align="center" label="序号" width="45">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" prop="name" label="检查项目" width="120" />
                <el-table-column align="left" prop="value" label="检查结果">
                  <template #default="scope">
                    <el-input type="text" v-model="scope.row.value" :disabled="testForm.status>1" maxlength="20" v-if="scope.row.type === 0 || scope.row.type===4"
                      @blur="setStatus(scope.row)" @input="setStatus(scope.row)">
                      <template #suffix v-if="scope.row.unit">{{scope.row.unit}}</template>
                    </el-input>
                    <el-select v-model="scope.row.value" :disabled="testForm.status>1" v-if="scope.row.type === 2" @visible-change="setStatusSel($event,scope.row)">
                      <template v-for="item in JSON.parse(scope.row.options)" :key="item.name">
                        <el-option :label="item.name" :value="item.name"></el-option>
                      </template>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <el-divider content-position="left">评价结论</el-divider>
              <el-descriptions class="margin-top" :column="1" size="small" border>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item" align="center">1 微生态</div>
                  </template>
                  <el-input class="h20" v-model="testForm.minTestResult" :disabled="testForm.status>1" type="text" placeholder="请输入评价结论"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item" align="center">2 AV评分</div>
                  </template>
                  <el-input class="h20" v-model="testForm.avScoreResult" :disabled="testForm.status>1" type="text" placeholder="请输入评价结论"></el-input>
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
          <el-row class="cls-item">
            <el-col :span="24">
              <el-divider content-position="left" class="fix-width">
                微生态评估意见
                <el-button type="success" class="eval-btn" size="small" @click="generateResultSuggest()" :disabled="testForm.status>1">生成评估意见</el-button>
              </el-divider>
              <div class="eval-opinion">
                <!--spellcheck="false"设定是否对用户输入的文章内容进行拼写检查,false去掉出现红色波浪线的问题  -->
                <el-input v-model="testForm.evalOpinion" :disabled="testForm.status>1" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" spellcheck="false"
                  placeholder="请输入结论及意见" />
              </div>
            </el-col>
          </el-row>
          <el-row class="cls-item pd5">
            <el-col :span="24">
              <el-divider content-position="left" class="fix-width">建议进一步检验</el-divider>
              <div class="eval-opinion">
                <el-checkbox-group v-model="testForm.nextTest" :disabled="testForm.status>1">
                  <el-checkbox v-for="(item, idx) in nextTestList" :key="idx" :label="item.code">
                    {{
                    item.name
                    }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="5" class="cls-item pd5">
            <el-col :span="16">
              <el-divider content-position="left" class="full-width">
                图像选择
                <el-upload class="uploadImg" action="#" :auto-upload="true" :show-file-list="false" accept="image/png, image/jpeg, image/jpg" :before-upload="handleBeforeUpload"
                  :http-request="(param:any)=>{return handleUploadImage(param,testForm.id)}">
                  <!-- 此按钮为弹出上传窗口的操作 -->
                  <el-button class="circle-btn" :disabled="testForm.status>1" v-if="testForm.id" circle type="success" :icon="Plus" size="small" ref="uploadImg"></el-button>
                </el-upload>
                <!-- 此按钮为上传窗口弹出前的校验操作 -->
                <el-button class="circle-btn" v-if="!testForm.id" :disabled="testForm.status>1" circle type="success" :icon="Plus" size="small"
                  @click="handAddAttach()"></el-button>
              </el-divider>
              <el-card class="image-card" shadow="hover">
                <NoData msg="暂无图像，试试手动上传" v-if="srcList.length===0" />
                <el-scrollbar always class="test-images">
                  <div class="scrollbar-flex-content">
                    <div v-for="(file,idx) in srcList" :key="file.path" class="scrollbar-item">
                      <el-image style="width: 100px; height: 100px" :zoom-rate="1.2" :src="showImg(file)" :initial-index="4" fit="cover" @click="handSelectImage(file,idx)" />
                      <div class="name">
                        {{idx+1}}
                        <span class="select-img" :key="idx" v-show="idx===selectImg.selIdx && testForm.status<2">
                          <el-icon size="20px" style="color:green">
                            <CircleCheck />
                          </el-icon>
                        </span>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-divider content-position="left" class="full-width">报告图像</el-divider>
              <el-card class="image-card" shadow="hover">
                <NoData msg="请添加图像" v-if="testForm.reportImgIds.length===0" />
                <el-scrollbar always class="rpt-images">
                  <template v-for="(img,idxt) in testForm.reportImgIds" :key="idxt">
                    <el-tag :closable="testForm.status>1?false:true" size="small" @close="handleDelete('report',img,idxt)">{{img.name}}</el-tag>
                  </template>
                </el-scrollbar>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-divider content-position="left" class="full-width">动态图像</el-divider>
              <el-card class="image-card" shadow="hover">
                <NoData msg="请添加图像" v-if="testForm.movingImgIds.length===0" />
                <el-scrollbar always class="rpt-images">
                  <template v-for="(img,idxm) in testForm.movingImgIds" :key="idxm">
                    <el-tag :closable="testForm.status>1?false:true" size="small" @close="handleDelete('moving',img,idxm)">{{img.name}}</el-tag>
                  </template>
                </el-scrollbar>
              </el-card>
            </el-col>
            <div style="margin-top:5px;padding-left:2px">
              <el-button type="success" icon="Plus" size="small" :disabled="testForm.status>1" @click="addImg('report')">报告图像</el-button>
              <el-button type="success" icon="Plus" size="small" :disabled="testForm.status>1" @click="addImg('moving')">动态图像</el-button>
              <el-button type="warning" icon="Delete" size="small" :disabled="testForm.status>1" @click="handleRemove()">删除图像</el-button>
            </div>
          </el-row>
          <el-row class="cls-item pd5" style="padding-bottom:20px">
            <el-col :span="24">
              <el-divider content-position="left">操作</el-divider>
              <div class="operation">
                <el-button type="primary" icon="EditPen" :loading="eloading" @click="editTestForm" :disabled="testForm.status>1">暂存</el-button>
                <el-button type="warning" :loading="smloading" icon="Position" @click="handSubmitTestForm('submit')" :disabled="testForm.status>2">提交</el-button>
                <el-button type="danger" icon="Finished" @click="handAuditTestForm('audit')">审核</el-button>
                <el-button type="info" :loading="printing" icon="Printer" @click="handPrintReport('print')">打印</el-button>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </pane>
    </splitpanes>
  </div>
</template>
<script setup lang="ts">
import NoData from '../../components/NoData.vue';

import { ref, reactive, getCurrentInstance, nextTick, inject, onUnmounted } from 'vue';
import { Plus, Finished, Search } from '@element-plus/icons-vue'; //从element-plus引入图标方式
import axios from 'axios';
// import { io } from 'socket.io-client';
import { pageSizes, notifyType, notifyMessage, testItemStatus } from '../../utils/common';
import type { FormInstance, ElTable } from 'element-plus';
import { AppStore } from '../../stores/store';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

let { proxy }: any = getCurrentInstance();
let store = AppStore();

let isCollapseMenu = inject('isCollapseMenu');
// watch(isCollapseMenu, (newValue, oldValue) => {
//   //如果折叠父级菜单栏，则调整宽度
//   console.log(isCollapseMenu, document.documentElement.clientWidth);
//   if (newValue) {
//   }
// });

//获取本地服务
// let socket = io('ws://localhost:' + proxy.$electronConfig.LOCAL_SOCKET_PORT, {
//   withCredentials: true
// });

let contHeight = document.documentElement.clientHeight;
let contWidth = document.documentElement.clientWidth;

let pageSizeList = ref(pageSizes);
let pageSize = ref(pageSizes[1]);
let pageIndex = ref(1);
let totalCount = ref(0);
let classItemList: any = reactive([]); //检验项目设置列表
let classList: any = reactive([]); //配置项检测大类（用于动态展示左侧居民列表动态列）
let eloading = ref(false); //编辑保存时加载
let sloading = ref(false); //新建保存时加载
let ttloading = ref(false); //左侧居民检测列表懒加载
let smloading = ref(false); //提交时加载
let auloading = ref(false); //审核时加载
let printing = ref(false); //打印时加载
let srcList: any = reactive([]);
let formRef = ref<FormInstance>();
const testPerTableRef = ref<InstanceType<typeof ElTable>>();
let testForm: any = reactive({
  id: '',
  orgId: store.userInfo.orgId,
  deptId: '',
  personId: '',
  idCard: '',
  name: '',
  reagentBarcode: '', //试剂条码
  applicationNo: '', //申请号
  sampleNo: '', //标本号
  cardNo: '', //卡号
  patientType: '', //病人类型
  checkItem: '', //检查项目
  wetBarcode: '', //湿片条码
  dyeBarcode: '', //染片条码
  boardNo: '', //板号
  minTestResult: '', //评价结论-微生态
  avScoreResult: '', //评价结论-AV评分
  evalOpinion: '', //微生态评估意见
  nextTest: [], //进一步检测
  reportImgIds: [], //报告图像
  movingImgIds: [], //动态图像
  status: null, //操作状态：已登记0，检测中1，已提交2，已审核3
  reportId: '' //可用报告模板id
});
const testFormRule = {
  reagentBarcode: [
    {
      required: true,
      message: '请输入条码号',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  idCard: [
    {
      required: true,
      message: '请输入证件号',
      trigger: 'blur'
    }
  ]
};

// 当前选中的图片附件
let selectImg: any = reactive({
  selIdx: null,
  id: '',
  path: ''
});

let testPerList: any = reactive([]); //居民检测信息数据
let nextTestList: any = reactive([]); //进一步检验数据
let perTypeList: any = reactive([]); //病人类型数据

// 获取检验项列表
findClassAndItemList();
// 获取进一步检验项目数据
findDictTreeListByTypeCode();
// 获取病人类型数据
findPersonTypeListByTypeCode();
// 获取检测居民列表
findTestFormList();

//点击每页数量
function handleSizeChange(val: any) {
  pageSize.value = val;
  pageIndex.value = 1;
  findTestFormList();
}
//点击跳转页码
function handleCurrentChange(val: any) {
  pageIndex.value = val;
  findTestFormList();
}

//获取检验项列表
function findClassAndItemList() {
  classItemList.length = 0;
  const url = '/api/test/findTestClassAndItemList';
  //通过deptId获取分类列表
  proxy.$http
    .get(url, { params: { orgId: store.userInfo.orgId } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        //后台获取到的分类列表赋值给前端声明的用来接住数据的数组
        classItemList.push(...res.data.classItemList);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}
// 获取进一步检验项目数据
function findDictTreeListByTypeCode() {
  const url = '/api/sys/findDictTreeListByTypeCode';
  proxy.$http
    .get(url, { params: { code: 'jybjy', orgId: store.userInfo.orgId } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        nextTestList.push(...res.data.dictItems);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}
// 获取病人类型数据
function findPersonTypeListByTypeCode() {
  const url = '/api/sys/findDictTreeListByTypeCode';
  proxy.$http
    .get(url, { params: { code: 'brlx', orgId: store.userInfo.orgId } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        perTypeList.push(...res.data.dictItems);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 获取检测居民列表
function findTestFormList() {
  ttloading.value = true;
  testPerList.length = 0;
  const url = '/api/test/findTestFormList';
  proxy.$http
    .get(url, {
      params: { orgId: store.userInfo.orgId, pageSize: pageSize.value, pageIndex: pageIndex.value }
    })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        testPerList.push(...res.data.testFormList);
        totalCount.value = res.data.count;
        // 获取配置检验大类渲染列表数据
        findClassList();
      }
      ttloading.value = false;
    })
    .catch((err: string) => {
      ttloading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 获取配置项检验大类
function findClassList() {
  classList.length = 0;
  const url = '/api/test/findTestClassList';
  proxy.$http
    .get(url, { params: { orgId: store.userInfo.orgId } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        classList.push(...res.data.list);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 点击左侧检测表获取数据
function handClickTestTab(row: any) {
  if (!row.id) {
    notifyMessage('检测信息错误，请核查！', notifyType.warning, proxy);
    return;
  }
  const url = '/api/test/findTestFormInfoByTestFormId';
  proxy.$http
    .get(url, { params: { testFormId: row.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        if (!res.data.testFormInfo) {
          notifyMessage('未获取到检验信息，请核查！', notifyType.warning, proxy);
        } else {
          // 显示登记信息
          let testFormInfo = res.data.testFormInfo;
          testForm.id = testFormInfo.id;
          testForm.name = testFormInfo.name;
          testForm.idCard = testFormInfo.idCard;
          testForm.deptId = testFormInfo.deptId;
          testForm.personId = testFormInfo.personId;
          testForm.reagentBarcode = testFormInfo.reagentBarcode;
          testForm.applicationNo = testFormInfo.applicationNo;
          testForm.sampleNo = testFormInfo.sampleNo;
          testForm.cardNo = testFormInfo.cardNo;
          testForm.patientType = testFormInfo.patientType;
          testForm.checkItem = testFormInfo.checkItem;
          testForm.wetBarcode = testFormInfo.wetBarcode;
          testForm.dyeBarcode = testFormInfo.dyeBarcode;
          testForm.boardNo = testFormInfo.boardNo;
          testForm.minTestResult = testFormInfo.minTestResult;
          testForm.avScoreResult = testFormInfo.avScoreResult;
          testForm.evalOpinion = testFormInfo.evalOpinion;
          testForm.nextTest = !testFormInfo.nextTest ? [] : JSON.parse(testFormInfo.nextTest);
          testForm.reportImgIds = !testFormInfo.reportImgIds
            ? []
            : JSON.parse(testFormInfo.reportImgIds);
          testForm.movingImgIds = !testFormInfo.movingImgIds
            ? []
            : JSON.parse(testFormInfo.movingImgIds);
          testForm.status = testFormInfo.status;
          testForm.reportId = testFormInfo.reportId;
          // 获取检验项目信息
          findTestResultClassList();
          // 获取附件信息
          findTestAttachmentList();
        }
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

//获取检验附件数据
function findTestAttachmentList() {
  srcList.length = 0;
  const url = '/api/test/findTestAttachmentByTestFormId';
  //通过deptId获取分类列表
  proxy.$http
    .get(url, { params: { testFormId: testForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        //后台获取到的分类列表赋值给前端声明的用来接住数据的数组
        srcList.push(...res.data.testAttachment);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 新建检测信息
function handleNewBuilt(formRef: any) {
  if (!formRef) return;
  formRef.clearValidate();
  testForm.id = '';
  testForm.deptId = '';
  testForm.personId = '';
  testForm.idCard = '';
  testForm.name = '';
  testForm.reagentBarcode = '';
  testForm.applicationNo = '';
  testForm.sampleNo = '';
  testForm.cardNo = '';
  testForm.patientType = '';
  testForm.checkItem = '';
  testForm.wetBarcode = '';
  testForm.dyeBarcode = '';
  testForm.boardNo = '';
  testForm.evalOpinion = '';
  testForm.nextTest = [];
  testForm.reportImgIds = [];
  testForm.movingImgIds = [];
  testForm.status = null;
  srcList.length = 0;
  findClassAndItemList();
  // 取消左侧table列表的高亮
  testPerTableRef.value?.setCurrentRow(-1);
  clearSelectImg();
}

// 保存检测信息
function submitForm(formRef: any) {
  // 必填项校验
  if (!formRef) return;
  formRef.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    sloading.value = true;
    // 编辑/保存居民表信息
    const obj = {
      id: testForm.personId,
      name: testForm.name,
      idCard: testForm.idCard,
      createFileOrgId: store.userInfo.orgId
    };
    let url = '';
    if (testForm.personId) {
      //编辑居民
      url = '/api/person/editPerson';
    } else {
      //新增居民
      url = '/api/person/addPerson';
    }
    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code === 1) {
          testForm.personId = res.data.personId;
          // 新增保存检测业务信息方法
          saveTestData();
        } else {
          notifyMessage(res.status.msg, notifyType.warning, proxy);
        }
        sloading.value = false;
      })
      .catch((err: string) => {
        sloading.value = false;
        notifyMessage(err, notifyType.warning, proxy);
      });
    return true;
  });
}

// 根据身份号获取居民信息
function findPersonByIdCard() {
  if (!testForm.idCard) {
    return;
  }
  testForm.idCard = testForm.idCard.trim();

  //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (!reg.test(testForm.idCard)) {
    notifyMessage('请输入正确的身份证号！', notifyType.warning, proxy);
    return;
  }
  const url = '/api/person/findPersonByIdCard';
  proxy.$http
    .get(url, { params: { idCard: testForm.idCard } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        if (res.data.person) {
          testForm.personId = res.data.person.id;
          testForm.name = res.data.person.name;
        }
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 新建保存检测数据
function saveTestData() {
  const testFormData = {
    id: testForm.id,
    orgId: store.userInfo.orgId,
    deptId: store.userInfo.curDept ? store.userInfo.curDept.deptId : '',
    personId: testForm.personId,
    name: testForm.name,
    idCard: testForm.idCard,
    reagentBarcode: testForm.reagentBarcode,
    applicationNo: testForm.applicationNo,
    sampleNo: testForm.sampleNo,
    cardNo: testForm.cardNo,
    patientType: testForm.patientType,
    checkItem: testForm.checkItem,
    wetBarcode: testForm.wetBarcode,
    dyeBarcode: testForm.dyeBarcode,
    boardNo: testForm.boardNo,
    registerUserId: store.userInfo.id, //登记人id
    registerUserName: store.userInfo.realname, //登记人name
    registerTime: '', //登记时间在服务端设置
    status: 0 //操作状态：已登记0，检测中1，已提交2，已审核3
  };

  let url = '/api/test/addTestForm';
  proxy.$http
    .post(url, testFormData)
    .then((res: any) => {
      if (res.status.code === 1) {
        notifyMessage('保存成功', notifyType.success, proxy);
        // 新增返回主表检测id
        testForm.id = res.data.testFormId;
        // 获取登记后的检测项目数据
        findTestResultClassList();
        // 获取左侧居民检测记录信息
        findTestFormList();
        // 高亮新增的数据
        // 选中第一行的数据
        nextTick(() => {
          testPerTableRef.value?.setCurrentRow(testPerList[0]);
        });
      } else {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
  return true;
}

// 根据条码号获取对应检验信息
function handleSearch(formRef: any) {
  if (!testForm.reagentBarcode.trim()) {
    notifyMessage('试剂条码不能为空，请输入有效条码号！', notifyType.warning, proxy);
    return;
  }
  const url = '/api/test/findTestFormInfoByreagentBarcode';
  proxy.$http
    .get(url, { params: { reagentBarcode: testForm.reagentBarcode } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        if (!res.data.testFormInfo) {
          notifyMessage('未获取到检验信息，请核查试剂条码！', notifyType.warning, proxy);
          handleNewBuilt(formRef);
        } else {
          // 显示登记信息
          let testFormInfo = res.data.testFormInfo;
          testForm.id = testFormInfo.id;
          testForm.name = testFormInfo.name;
          testForm.idCard = testFormInfo.idCard;
          testForm.deptId = testFormInfo.deptId;
          testForm.personId = testFormInfo.personId;
          testForm.applicationNo = testFormInfo.applicationNo;
          testForm.sampleNo = testFormInfo.sampleNo;
          testForm.cardNo = testFormInfo.cardNo;
          testForm.patientType = testFormInfo.patientType;
          testForm.checkItem = testFormInfo.checkItem;
          testForm.wetBarcode = testFormInfo.wetBarcode;
          testForm.dyeBarcode = testFormInfo.dyeBarcode;
          testForm.boardNo = testFormInfo.boardNo;
          testForm.minTestResult = testFormInfo.minTestResult;
          testForm.avScoreResult = testFormInfo.avScoreResult;
          testForm.evalOpinion = testFormInfo.evalOpinion;
          testForm.nextTest = !testFormInfo.nextTest ? [] : JSON.parse(testFormInfo.nextTest);
          testForm.reportImgIds = !testFormInfo.reportImgIds
            ? []
            : JSON.parse(testFormInfo.reportImgIds);
          testForm.movingImgIds = !testFormInfo.movingImgIds
            ? []
            : JSON.parse(testFormInfo.movingImgIds);
          testForm.status = testFormInfo.status;
          testForm.reportId = testFormInfo.reportId;
          // 获取检验项目信息
          findTestResultClassList();
          // 获取附件信息
          findTestAttachmentList();
          // 左侧居民检测列表定位高亮检索位置
          let testPerIndex = testPerList.findIndex(
            (row: any) => row.applicationNo === testForm.applicationNo
          );
          nextTick(() => {
            testPerTableRef.value?.setCurrentRow(testPerList[testPerIndex]);
          });
        }
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 判断范围值检测项异常状态
function setStatus(item: any) {
  if (item.value === null || item.value === '') {
    return;
  }
  // 范围值类型
  if (item.type === 4) {
    if (item.maxValue) {
      if (item.value > item.maxValue) {
        item.status = testItemStatus.H;
        return;
      }
    }
    if (item.minValue) {
      if (item.value < item.minValue) {
        item.status = testItemStatus.L;
        return;
      }
    }
  }
  item.status = testItemStatus.M;
}

// 判断选择项结果异常状态
function setStatusSel(callback: any, item: any) {
  if (!callback) {
    if (item.value === '' || item.value === null) {
      return;
    }
    // 下拉选项类型
    if (item.type === 2) {
      if (item.options) {
        const dValue = JSON.parse(item.options);
        const temp = dValue.filter((p: any) => p.name === item.value);
        if (temp.length === 1 && temp[0].status !== testItemStatus.M) {
          item.status = temp[0].status;
          return;
        }
      }
    }
    item.status = testItemStatus.M;
  }
}

// 点击完成检验项目
function handleFinish(clsItem: any) {
  if (clsItem && clsItem.itemList && clsItem.itemList.length > 0) {
    for (const item of clsItem.itemList) {
      if (!item.value) {
        notifyMessage(`【${item.name}】无结果，无法完成！`, notifyType.warning, proxy);
        return;
      }
    }
    // 修改检验大类的完成状态
    const obj = {
      id: clsItem.id,
      status: 1,
      itemList: clsItem.itemList
    };
    const url = '/api/test/editTestResultClass';
    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code === 1) {
          notifyMessage('设置完成', notifyType.success, proxy);
          // 更新前端检测大类完成状态
          clsItem.status = res.data.resultClass.status;
          // 前端更新完成图标显示状态
          let testPer = testPerList.filter((p: any) => p.id === clsItem.testFormId);
          if (testPer.length === 1) {
            testPer[0].TestResultClasses.filter(
              (p: any) => p.classId === clsItem.classId
            )[0].status = res.data.resultClass.status;
          }
          // 重新获取左侧居民检验数据
          // findTestFormList();
        } else {
          notifyMessage(res.status.msg, notifyType.warning, proxy);
        }
      })
      .catch((err: string) => {
        notifyMessage(err, notifyType.warning, proxy);
      });
  }
}

// 生成结论建议
function generateResultSuggest() {
  if (!testForm.id) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    return;
  }
  // 判断是否还有未完成的检验分类
  if (classItemList.some((p: any) => p.status === 0)) {
    notifyMessage('还有未完成的检测项目，请先操作完成！', notifyType.warning, proxy);
    return;
  }
  if (testForm.evalOpinion) {
    proxy
      .$confirm('确定生成结论建议?注意：生成后会将当前已有结果覆盖！', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        gntResult();
      })
      .catch((err: string) => {
        notifyMessage(err, notifyType.warning, proxy);
      });
  } else {
    gntResult();
  }
}

// 生成结论
function gntResult() {
  const url = '/api/test/generateTestFormResult';
  proxy.$http
    .post(url, { deptId: testForm.deptId, testFormId: testForm.id })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        if (res.data.isComplete) {
          getStrResult(res.data.subjectList);
        } else {
          testForm.evalOpinion = '';
        }
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 生成建议
function gntSuggest(result: any) {
  let suggest = '';
  const url = '/api/test/generateTestFormSuggest';
  proxy.$http
    .get(url, { params: { deptId: testForm.deptId, testFormId: testForm.id, result: result } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        notifyMessage('生成结论意见完成', notifyType.success, proxy);
        if (res.data.suggestList && res.data.suggestList.length > 0) {
          suggest = '【结论】：' + result + '\r\n【意见】：' + res.data.suggestList.join('\r\n');
        } else {
          suggest = '【结论】：' + result + '\r\n【意见】：建议定期复查';
        }
        testForm.evalOpinion = suggest;
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

//获取结论
function getStrResult(subList: []) {
  let result = '';
  subList.forEach((sub: any) => {
    if (sub.type === 2 || sub.type === 4) {
      let strStatus = '';
      switch (sub.status) {
        //以下是数值类型体检项状态
        case testItemStatus.H:
          strStatus = '[偏高]';
          break;
        case testItemStatus.L:
          strStatus = '[偏低]';
          break;
        case testItemStatus.P:
          strStatus = '[阳性]';
          break;
        case testItemStatus.W:
          strStatus = '[弱阳]';
          break;
        case testItemStatus.E:
          strStatus = '[错误]';
          break;
        //以下是计算项目状态
        case '0':
          strStatus = '[异常]';
          break;
        case '1':
          strStatus = '[阳性]';
          break;
        case '2':
          strStatus = '[阴性]';
          break;
      }
      const str = sub.name + '(' + sub.code + ')' + '：' + strStatus + '；';
      result += str;
    }
  });
  if (!result) {
    result = '未发现异常';
  }
  gntSuggest(result);
}

// 图片展示
function showImg(file: any) {
  return proxy.$electronConfig.SERVICE_URL + file.path;
}

// 上传附件窗口弹出前的校验
function handAddAttach() {
  if (!testForm.id) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    return;
  }
}

// 图片大小校验
function handleBeforeUpload(file: any) {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    notifyMessage('上传头像图片大小不能超过 2MB！', notifyType.warning, proxy);
  }
  return isLt2M;
}

// 图片上传
function handleUploadImage(param: any, testFormId: any) {
  if (!testFormId) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    return;
  }
  const fd = new FormData();
  fd.append('file', param.file);
  fd.append(
    'ckItem',
    JSON.stringify({
      testFormId
    })
  ); //传对象
  const url = '/api/test/uploadCheckImage';
  proxy.$http
    .post(url, fd)
    .then((res: any) => {
      if (res.status.code === 1) {
        notifyMessage('上传成功', notifyType.success, proxy);
        //添加到数组中
        srcList.push({
          id: res.data.id,
          name: res.data.name,
          path: res.data.path,
          testFormId: res.data.testFormId
        });
      } else {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      }
    })
    .catch((err: string) => {
      console.log(err);
    });
}

// 点击图片事件
function handSelectImage(file: any, idx: any) {
  selectImg.selIdx = idx;
  selectImg.id = file.id;
  selectImg.path = file.path;
}

// 清空选择
function clearSelectImg() {
  selectImg.selIdx = null;
  selectImg.id = '';
  selectImg.path = '';
}

// 添加图像
function addImg(imgType: any) {
  if (!selectImg.selIdx && selectImg.selIdx !== 0) {
    notifyMessage(
      `请先点击选中需要上传的图像，再添加${imgType === 'report' ? '报告' : '动态'}图像！`,
      notifyType.warning,
      proxy
    );
    return;
  }
  if (imgType === 'report') {
    testForm.reportImgIds.push({
      id: selectImg.id,
      path: selectImg.path,
      name: selectImg.selIdx + 1
    });
  }
  if (imgType === 'moving') {
    testForm.movingImgIds.push({
      id: selectImg.id,
      path: selectImg.path,
      name: selectImg.selIdx + 1
    });
  }
  clearSelectImg();
}

// 删除图像
function handleDelete(imgType: any, img: any, idx: any) {
  if (imgType === 'report') {
    testForm.reportImgIds.splice(idx, 1);
  }
  if (imgType === 'moving') {
    testForm.movingImgIds.splice(idx, 1);
  }
}

// 删除附件图片
function handleRemove() {
  if (!selectImg.selIdx && selectImg.selIdx !== 0) {
    notifyMessage(`请先点击选中图像，再删除！`, notifyType.warning, proxy);
    return;
  }
  proxy
    .$confirm('确定删除此文件?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const url = '/api/test/deleteCheckImage';
      proxy.$http
        .post(url, { id: selectImg.id, path: selectImg.path })
        .then((res: any) => {
          if (res.status.code === 1) {
            notifyMessage('删除成功', notifyType.success, proxy);
            // 前端删除图片
            srcList.splice(selectImg.selIdx, 1);
            // 清空选择
            clearSelectImg();
          } else {
            notifyMessage(res.status.msg, notifyType.warning, proxy);
          }
        })
        .catch((err: string) => {
          notifyMessage(err, notifyType.warning, proxy);
        });
    })
    .catch((err: string) => {
      console.log(err);
    });
}

//获取检验项列表
function findTestResultClassList() {
  classItemList.length = 0;
  const url = '/api/test/findTestResultClassListByTestFormId';
  //通过deptId获取分类列表
  proxy.$http
    .get(url, { params: { testFormId: testForm.id } })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        //后台获取到的分类列表赋值给前端声明的用来接住数据的数组
        classItemList.push(...res.data.testResultClassList);
        // classItemList.forEach((item:any) => {
        //   item.itemList.sort(function(a,b) {
        //     return a.order - b.order
        //   })
        // })
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 暂存检验结果
function editTestForm() {
  eloading.value = true;
  if (!testForm.id) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    eloading.value = false;
    return;
  }
  testForm.status = 1; //暂存时，状态为1
  const url = '/api/test/editTestForm';
  const fd = new FormData();
  fd.append('tfObj', JSON.stringify(testForm)); //传对象
  fd.append('testResult', JSON.stringify(classItemList)); //传数组
  proxy.$http
    .post(url, fd)
    .then((res: any) => {
      if (res.status.code === 1) {
        notifyMessage('保存成功', notifyType.success, proxy);
      } else {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      }
      eloading.value = false;
    })
    .catch((err: string) => {
      eloading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
  return true;
}

// 提交检验结果
async function handSubmitTestForm(type: any) {
  smloading.value = true;
  if (!testForm.id) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    smloading.value = false;
    return;
  }

  const obj = {
    type,
    id: testForm.id,
    orgId: store.userInfo.orgId,
    status: 2, //操作状态：已登记0，检测中1，已提交2，已审核3
    submitUserId: store.userInfo.id, //提交人Id
    submitUserName: store.userInfo.realname, //提交人name
    submitTime: '' //提交时间服务端设置
  };
  // 调用统一接口方法
  await updateTestFormStatus(obj);
  smloading.value = false;
}

// 审核检验结果
async function handAuditTestForm(type: any) {
  auloading.value = true;
  if (!testForm.id) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    auloading.value = false;
    return;
  }
  const obj = {
    type,
    id: testForm.id,
    status: 3, //操作状态：已登记0，检测中1，已提交2，已审核3
    auditUserId: store.userInfo.id, //审核人Id
    auditUserName: store.userInfo.realname, //审核人name
    auditTime: '' //审核时间服务端设置
  };
  // 调用统一接口方法
  await updateTestFormStatus(obj);
  auloading.value = false;
}

// 打印报告
function handPrintReport(type: any) {
  if (!testForm.id) {
    notifyMessage('未登记检测信息，请先新建信息！', notifyType.warning, proxy);
    return;
  }
  printing.value = true;
  //获取默认报告模板（根据提交时保存的报表id获取报告模板）
  const url = '/api/test/findReportTemplateById';
  proxy.$http
    .get(url, { params: { id: testForm.reportId } })
    .then(async (res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
        printing.value = false;
        return;
      }

      if (res.data.template) {
        //获取报告base64位数据
        const pdfRes = await axios.post(
          proxy.$electronConfig.REPORT_DESIGNER_URL + '/api/active-report/export/pdf',
          {
            ReportName: res.data.template.fileName, // todo 应该取res.data.template.path文件
            ReportParameters: [
              {
                Name: 'testFormId',
                Value: testForm.id
              }
            ]
          }
        );

        if (!pdfRes || pdfRes.status !== 200 || pdfRes.data.resultCode !== '1') {
          notifyMessage('获取报告数据错误，请于管理员联系！', notifyType.warning, proxy);
          printing.value = false;
          return;
        }

        console.log(type);
        // let param: any = {
        //   pdf: pdfRes.data.pdf,
        //   options: {
        //     type: 1, //base64位数据
        //     printer: store.printer.defaultName,
        //     paperSize: store.printer.paperSize,
        //     printDialog: store.printer.silentPrint === 0 ? true : false,
        //     silent: false //不提示错误信息
        //   }
        // };
        // socket.emit('wsPrint', param, (resWs) => {
        //   if (resWs && resWs.status.code === 1) {
        //     //保存打印结果
        //     const obj = {
        //       type,
        //       id: testForm.id,
        //       reportId: res.data.template.id,
        //       reportStatus: 1, //报告状态
        //       reportUserId: store.userInfo.id, //报告人Id
        //       reportUserName: store.userInfo.realname, //报告人name
        //       reportTime: '' //报告时间服务端设置
        //     };
        //     // 调用统一接口方法
        //     updateTestFormStatus(obj);
        //   } else {
        //     notifyMessage(resWs.status.msg, notifyType.warning, proxy);
        //   }
        //   printing.value = false;
        // });
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
      printing.value = false;
    });
}

// 操作状态统一调用接口
function updateTestFormStatus(obj: any) {
  let url = '/api/test/editTestFormStatusByTestFormId';
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      if (res.status.code === 1) {
        switch (obj.type) {
          case 'submit':
            testForm.reportId = res.data.testForm.reportId;
            notifyMessage('提交成功', notifyType.success, proxy);
            break;
          case 'audit':
            notifyMessage('审核成功', notifyType.success, proxy);
            break;
          case 'print':
            notifyMessage('已发送到打印机', notifyType.success, proxy);
            break;
        }

        testForm.status = res.data.testForm.status;
        // 前端更新完成图标显示状态
        if (obj.type === 'print') {
          testPerList.filter((p: any) => p.id === testForm.id)[0].reportStatus =
            res.data.testForm.reportStatus;
        } else {
          testPerList.filter((p: any) => p.id === testForm.id)[0].status = res.data.testForm.status;
        }
        // 重新获取左侧居民检验数据
        // findTestFormList();
        // 左侧居民检测列表定位高亮检索位置
        let testPerIndex = testPerList.findIndex(
          (row: any) => row.applicationNo === testForm.applicationNo
        );
        nextTick(() => {
          testPerTableRef.value?.setCurrentRow(testPerList[testPerIndex]);
        });
      } else {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      }
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
  return true;
}

//离开页面销毁ws连接
onUnmounted(() => {
  // socket.disconnect();
});
</script>
<style lang="scss" scoped>
#testForm {
  height: 100%;
  .form-input-m {
    margin-top: 10px;
  }
  .el-form-item--small {
    margin-bottom: 5px;
    :deep(.el-input--small .el-input__inner) {
      height: 25px !important;
    }
  }
  // 左侧搜索按钮样式
  .search-btn {
    color: $blue-5;
    font-size: 17px;
  }
  // 左侧搜索按钮位置
  .el-button--small {
    padding: 3px 8px;
  }
  .left-btn {
    margin-left: 80px;
  }
  .el-table {
    margin: 5px;
  }
  :deep(.cls-status) {
    .cell {
      display: contents !important;
    }
  }
  .cont-scroll {
    background-color: $base-white !important;
    :deep(.el-scrollbar__bar.is-horizontal) {
      height: 0 !important;
    }
  }

  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  :deep(.el-table__body tr.current-row > td) {
    background-color: $bg-blug !important;
  }
  .cls-item {
    background-color: $base-white;
    .el-scrollbar__wrap {
      background-color: $base-white;
    }
  }
  // 右侧侧table中行
  :deep(.el-table__row) {
    td {
      padding: 0;
    }
    .el-input__inner {
      height: 22px;
    }
    .el-input__suffix {
      line-height: 22px;
    }
  }
  :deep(.h20) {
    .el-input__inner {
      height: 22px;
    }
    .el-input__suffix {
      line-height: 22px;
    }
  }
  :deep(.circle-btn) {
    --el-button-size: 18px;
  }

  :deep(.el-table--small .cell) {
    padding: 2px 5px !important;
  }

  .el-divider--horizontal {
    width: 200px;
    margin: 15px 0;
  }
  .eval-opinion {
    padding: 0 5px 5px 5px;
  }

  .el-scrollbar__wrap {
    background-color: $base-white;
  }

  .el-scrollbar {
    background-color: $bg-content;
  }
  .test-images {
    height: auto;
    :deep(.el-scrollbar__bar.is-horizontal) {
      height: 6px !important;
    }
  }
  .scrollbar-flex-content {
    display: flex;
  }
  .scrollbar-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    // height: 50px;
    margin: 10px;
    text-align: center;
    border: $border-dark;
    position: relative;
    .name {
      font-size: 12px;
      padding: 2px 0;
    }
    .select-img {
      position: absolute;
      bottom: -4px;
      left: 2px;
    }
  }
  .fix-width {
    width: 49%;
    .eval-btn {
      margin-left: 5px;
    }
  }
  .full-width {
    width: 100%;
    .uploadImg {
      display: inline-block;
      margin-left: 5px;
    }
  }
  .image-card {
    min-height: 140px;
    // 使用样式穿透修改element ui内置样式
    :deep(.el-card__body) {
      padding: 0 !important;
    }
    :deep(#noData) {
      height: 140px;
    }
    :deep(#noData img) {
      top: 50px;
      width: 80px;
      height: 80px;
    }
    :deep(#noData span) {
      top: 100px;
    }
  }
  .rpt-images {
    height: auto;
    :deep(.el-scrollbar__view) {
      text-align: center;
      .el-tag {
        width: 100px;
        margin: 5px;
      }
    }
  }
  .pd5 {
    padding: 0 5px;
  }
}
</style>
